import React, { Component, PropTypes } from 'react';
import { createContainer } from 'meteor/react-meteor-data';
import { mycbops } from '../api/blocksmgr/chainblocks4mongo';
import ActionGrade from 'material-ui/svg-icons/action/grade';
import Divider from 'material-ui/Divider';
import Avatar from 'material-ui/Avatar';
import {pinkA200, transparent} from 'material-ui/styles/colors';
import Drawer from 'material-ui/Drawer';
import AppBar from 'material-ui/AppBar';

import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import RaisedButton from 'material-ui/RaisedButton';

import TextField from 'material-ui/TextField';
import SelectField from 'material-ui/SelectField';

const styles = {
  toolbar:{
    position: 'fixed',
    top: 0,
    width: '100%',
  },
  dlg:{
    width: '100%',
    maxWidth: 'none',    
  },
  myblock:{
      margin: 12,
  }
}

function nDig(n, digits){								//zero left pad to number of digits
	var ret = n;
	for(var i=0; i < digits; i++) ret = '0' + ret;		//add  up to max i would need
	ret = ret.substring(ret.length - digits);			//cut off what you don't need
	return ret;
}

export  class Tab5 extends Component {
  constructor(props) {
    super(props)
    this.state = {
      open: false,
      ismonitor:false,
      uid:null
    };
  }

    
componentDidMount(x,y,z){
 this.setState({cw:window.innerWidth});
};  

renderItems() {
    const newsList = this.props.items.map(function(item,index) {
      return <RaisedButton label="Primary" primary={true} style={styles.myblock} />
    });
  return ({newsList});
}


 render() {
     let btns_action1 = [
      <FlatButton
        label="取消"
        onTouchTap={e => this.setState({open:false})}
      />
    ]

      let view_item = this.state.view_item;
        if(!view_item){
            view_item = {};
        }
    return (
    <div>    
    <div>
     { this.props.items.map((item,index)=> (
            <RaisedButton label={nDig(item.blockheight,3)} primary={true} style={styles.myblock}
             onTouchTap={e => this.setState({open:true,view_item:item})}
             />
        ))}
     

 

  
    </div>
    <Dialog
          contentStyle={styles.dlg}
          actions={btns_action1}
          title="查看区块内容"
          modal={false}
          open={this.state.open}
          openSecondary={true}
          autoScrollBodyContent={true}
          onRequestClose={e => this.setState({open:false})}
        >
      <TextField
        floatingLabelText='区块号'
        floatingLabelFixed={true}
        fullWidth={true}
        value={view_item.blockheight}
      />
      <TextField
        floatingLabelText='交易时间'
        floatingLabelFixed={true}
        fullWidth={true}
        value={view_item.created}
      />
      <TextField
        floatingLabelText='交易类型'
        floatingLabelFixed={true}
        fullWidth={true}
        value={view_item.type}
      />
      <TextField
        floatingLabelText='交易内容'
        floatingLabelFixed={true}
        multiLine = {true}
        fullWidth={true}
        value={view_item.payload}
      />
    </Dialog>
    </div>
   )
  }  
}


Tab5.propTypes = {
  items: PropTypes.array.isRequired,
};

function monitorblocks(){
    setInterval(function(){
                Meteor.call('trans.getallblocks',function(err,result){
    });
                }, 15000);
}

export default createContainer((props) => {
    Meteor.subscribe('chainblockbuf');

    if(!props.ismonitor){
        monitorblocks();
        props.ismonitor = true;
    }
    
   // Meteor.call('trans.getallblocks',function(err,result){
   // });

  
  //  let bsss = ;
   return {
    items: mycbops.find({},{sort:{blockheight:-1}}).fetch(),
  };
}, Tab5);